<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客流分析</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/bean.css" />
    <link rel="stylesheet" type="text/css" href="../css/foundation-datepicker.css" />
    <link rel="stylesheet" type="text/css" href="../css/realTimeTraffic.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lIoGcac1MG3uPjTs9BOA3pdfstaDZqeQ"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
</head>

<body>
    <div class="guding .margin-bottom24">
        <nav class="navbar navbar-default g-nav">
            <span class="navbar-brand">全域旅游综合信息服务平台</span>
            <div class=" navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/html/home.html">首页</a></li>
                    <li>
                        <a class="active" href="/html/realTimeTraffic.html">智慧分析</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item active" href="/html/realTimeTraffic.html">实时客流</a>
                            <a class="sub-nav-item" href="/html/touristPortrait.html">游客画像</a>
                        </div>
                    </li>
                    <li>
                        <a href="/html/demoareaSupervise.html">智慧监管</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/demoareaSupervise.html">示范区监管</a>
                            <a class="sub-nav-item" href="/html/scenicSpotList.html">视频监控</a>
                            <a class="sub-nav-item" href="/html/safetyWarning.html">安全预警</a>
                            <a class="sub-nav-item" href="/html/wisdomSupervise_guide.html">旅游产业数据</a>
                            <a class="sub-nav-item" href="/html/complaints.html">投诉举报管理</a>
                        </div>
                    </li>
                    <li><a href="/html/resources.html">旅游资源</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!--导航结束-->
    <div class="content" style="width:1920px;">
        <ul class="e-box1 flex margin-bottom24">
            <li class="box-a margin-right24 height526 backgroundfff border">
                <div class="margin-top24">
                    <span class="padding-left44 title-b">客流量走势分析</span>
                    <div class="btnbox padding-right22">
                        <input type="text" class="dpd2 dpd" placeholder="日期选择">
                        <span class="padding10">至</span>
                        <input type="text" class="dpd3 dpd" placeholder="日期选择">
                    </div>
                    <div id="echart1" class="height360">
                    </div>
                </div>
            </li>
            <li class="box-b backgroundfff border height526">
                <ul class="flex">
                    <li class="box-a-a height526">
                        <div class="height526" id="allmap">

                        </div>
                        <p class="map-title">实时人数</p>
                        <div class="map-number">
                            <span>4</span>
                            <span>3</span>
                            <span>3</span>
                            <span>2</span>
                            <span>2</span>
                            <span>2</span>
                        </div>
                    </li>
                    <li class="box-a-b height526">
                        <p class="box-a-b-p">客流量排行TOP10</p>
                        <div class="height400" id="echart4">

                        </div>
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="e-box2 flex ">
            <li class="box-a margin-right24 height404 backgroundfff border">
                <div class="margin-top24">
                    <span class="title-b padding-left44">假日客流走势分析</span>
                </div>
                <div id="echart2" class="height358">
                </div>
            </li>
            <li class="box-b height404 backgroundfff border">
                <div class="cl">
                    <span class="title-b padding-right22">历史景区客流量对比分析</span>
                    <div class="btnbox lr">
                        <input type="text" class="dpd4 dpd" placeholder="日期选择">
                        <span class="padding10">至</span>
                        <input type="text" class="dpd5 dpd" placeholder="日期选择">
                    </div>
                </div>
                    <div class="compare-city-list">
                        <span class="compare-city-list__item">
                            乐山大佛
                        </span>
                        <span class="link-item">与</span>
                        <span class="compare-city-list__item">
                            峨眉山
                        </span>
                    <div/>
                </div>
                <div class="chart-legend">
                    <div class="chart-legend-item">
                        <span class="chart-legend-item__tag"></span>
                        <span>乐山大佛</span>
                    </div>
                    <div class="chart-legend-item">
                        <span class="chart-legend-item__tag"></span>
                        <span>峨眉山</span>
                    </div>
                </div>
                <div id="echart3" class="height312">
                </div>
        </ul>
    </div>
    <!--内容结束-->
    <div class="dialog" style="width: 600px; height: 400px; margin-left: -300px;">
        <div class="dialog-close-button"></div>
        <div class="dialog-title">2017年元旦客流</div>
        <div class="dialog-content">
            <div id="pieChart" style="width: 600px;height: 300px;"></div>
        </div>
    </div>
    <div class="mask"></div>
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/foundation-datepicker.js"></script>
    <script src="../js/foundation-datepicker.zh-CN.js"></script>
    <script src="../js/lodash.js"></script>
    <script src="../js/realTimeTraffic.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1i1NHYIPj6ZrjpANKT8eKBD31SLR8X0k"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <script>
        getCharts('echart1', 'line');
        var chart = getCharts('echart2', 'bar');
        getCharts('echart3', 'line-a');
        getCharts('echart4', 'bar-a');

        chart.on('click', function() {
            drawDialogPie();
            $('.dialog').show();
            $('.mask').show();
        })

        $('.dialog-close-button').click(function() {
            $('.dialog').hide();
            $('.mask').hide();
        })

        function drawDialogPie() {
            var data2 = [{
                value: 3661,
                name: '第一天',
            }, {
                value: 5713,
                name: '第二天',
            }, {
                value: 9938,
                name: '第三天',
            }];
            var options = {
                tooltip: {
                    trigger: 'item',
                },
                color: ['rgba(0,255,255,0.58)', 'rgba(55,201,54,0.60)', 'rgba(248,231,28,0.64)'],
                series: [{
                    name: '2017元旦客流',
                    type: 'pie',
                    center: ['50%', '55%'],
                    radius: '70%',
                    selectedMode: 'single',
                    tooltip: {
                        formatter: function(params) {
                            return params.name + '：' + params.percent + '%'
                        }
                    },
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.name + '\n' + params.value + '人'
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        }
                    },
                    data: data2
                }]
            };
            var chart = echarts.init(document.getElementById('pieChart'))
            chart.setOption(options)
        }

        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
        var checkin = $('.dpd2').fdatepicker({
            format: 'yy-mm-dd',
        }).on('changeDate', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.update(newDate);
            }
            checkin.hide();
            $('.dpd3')[0].focus();
        }).data('datepicker');
        var checkout = $('.dpd3').fdatepicker({
            format: 'yy-mm-dd',
            onRender: function (date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {

            checkout.hide();
        }).data('datepicker');

        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
        var checkin = $('.dpd4').fdatepicker({
            format: 'yy-mm-dd',
        }).on('changeDate', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.update(newDate);
            }
            checkin.hide();
            $('.dpd5')[0].focus();
        }).data('datepicker');
        var checkout = $('.dpd5').fdatepicker({
            format: 'yy-mm-dd',
            onRender: function (date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {

            checkout.hide();
        }).data('datepicker');

    </script>
    <script>
        var map = new BMap.Map("allmap", {
            minZoom: 13,
            maxZoom: 17
        }); // 创建Map实例,设置地图允许的最小/大级别
        map.centerAndZoom(new BMap.Point(116.418261, 39.921984), 15);
        map.enableScrollWheelZoom(true);
        map.setMapStyle({
            style: 'midnight'
        }); //风格
        //  	map.disableDragging();
        //  map.enableScrollWheelZoom(); // 允许滚轮缩放
        var points = [{
                "lng": 116.418261,
                "lat": 39.921984,
                "count": 50
            },
            {
                "lng": 116.423332,
                "lat": 39.916532,
                "count": 51
            },
            {
                "lng": 116.419787,
                "lat": 39.930658,
                "count": 15
            },
            {
                "lng": 116.418455,
                "lat": 39.920921,
                "count": 40
            },
            {
                "lng": 116.418843,
                "lat": 39.915516,
                "count": 100
            },
            {
                "lng": 116.42546,
                "lat": 39.918503,
                "count": 6
            },
            {
                "lng": 116.423289,
                "lat": 39.919989,
                "count": 18
            },
            {
                "lng": 116.418162,
                "lat": 39.915051,
                "count": 80
            },
            {
                "lng": 116.422039,
                "lat": 39.91782,
                "count": 11
            },
            {
                "lng": 116.41387,
                "lat": 39.917253,
                "count": 7
            },
            {
                "lng": 116.41773,
                "lat": 39.919426,
                "count": 42
            },
            {
                "lng": 116.421107,
                "lat": 39.916445,
                "count": 4
            },
            {
                "lng": 116.417521,
                "lat": 39.917943,
                "count": 27
            },
            {
                "lng": 116.419812,
                "lat": 39.920836,
                "count": 23
            },
            {
                "lng": 116.420682,
                "lat": 39.91463,
                "count": 60
            },
            {
                "lng": 116.415424,
                "lat": 39.924675,
                "count": 8
            },
            {
                "lng": 116.419242,
                "lat": 39.914509,
                "count": 15
            },
            {
                "lng": 116.422766,
                "lat": 39.921408,
                "count": 25
            },
            {
                "lng": 116.421674,
                "lat": 39.924396,
                "count": 21
            },
            {
                "lng": 116.427268,
                "lat": 39.92267,
                "count": 1
            },
            {
                "lng": 116.417721,
                "lat": 39.920034,
                "count": 51
            },
            {
                "lng": 116.412456,
                "lat": 39.92667,
                "count": 7
            },
            {
                "lng": 116.420432,
                "lat": 39.919114,
                "count": 11
            },
            {
                "lng": 116.425013,
                "lat": 39.921611,
                "count": 35
            },
            {
                "lng": 116.418733,
                "lat": 39.931037,
                "count": 22
            },
            {
                "lng": 116.419336,
                "lat": 39.931134,
                "count": 4
            },
            {
                "lng": 116.413557,
                "lat": 39.923254,
                "count": 5
            },
            {
                "lng": 116.418367,
                "lat": 39.92943,
                "count": 3
            },
            {
                "lng": 116.424312,
                "lat": 39.919621,
                "count": 100
            },
            {
                "lng": 116.423874,
                "lat": 39.919447,
                "count": 87
            },
            {
                "lng": 116.424225,
                "lat": 39.923091,
                "count": 32
            },
            {
                "lng": 116.417801,
                "lat": 39.921854,
                "count": 44
            },
            {
                "lng": 116.417129,
                "lat": 39.928227,
                "count": 21
            },
            {
                "lng": 116.426426,
                "lat": 39.922286,
                "count": 80
            },
            {
                "lng": 116.421597,
                "lat": 39.91948,
                "count": 32
            },
            {
                "lng": 116.423895,
                "lat": 39.920787,
                "count": 26
            },
            {
                "lng": 116.423563,
                "lat": 39.921197,
                "count": 17
            },
            {
                "lng": 116.417982,
                "lat": 39.922547,
                "count": 17
            },
            {
                "lng": 116.426126,
                "lat": 39.921938,
                "count": 25
            },
            {
                "lng": 116.42326,
                "lat": 39.915782,
                "count": 100
            },
            {
                "lng": 116.419239,
                "lat": 39.916759,
                "count": 39
            },
            {
                "lng": 116.417185,
                "lat": 39.929123,
                "count": 11
            },
            {
                "lng": 116.417237,
                "lat": 39.927518,
                "count": 9
            },
            {
                "lng": 116.417784,
                "lat": 39.915754,
                "count": 47
            },
            {
                "lng": 116.420193,
                "lat": 39.917061,
                "count": 52
            },
            {
                "lng": 116.422735,
                "lat": 39.915619,
                "count": 100
            },
            {
                "lng": 116.418495,
                "lat": 39.915958,
                "count": 46
            },
            {
                "lng": 116.416292,
                "lat": 39.931166,
                "count": 9
            },
            {
                "lng": 116.419916,
                "lat": 39.924055,
                "count": 8
            },
            {
                "lng": 116.42189,
                "lat": 39.921308,
                "count": 11
            },
            {
                "lng": 116.413765,
                "lat": 39.929376,
                "count": 3
            },
            {
                "lng": 116.418232,
                "lat": 39.920348,
                "count": 50
            },
            {
                "lng": 116.417554,
                "lat": 39.930511,
                "count": 15
            },
            {
                "lng": 116.418568,
                "lat": 39.918161,
                "count": 23
            },
            {
                "lng": 116.413461,
                "lat": 39.926306,
                "count": 3
            },
            {
                "lng": 116.42232,
                "lat": 39.92161,
                "count": 13
            },
            {
                "lng": 116.4174,
                "lat": 39.928616,
                "count": 6
            },
            {
                "lng": 116.424679,
                "lat": 39.915499,
                "count": 21
            },
            {
                "lng": 116.42171,
                "lat": 39.915738,
                "count": 29
            },
            {
                "lng": 116.417836,
                "lat": 39.916998,
                "count": 99
            },
            {
                "lng": 116.420755,
                "lat": 39.928001,
                "count": 10
            },
            {
                "lng": 116.414077,
                "lat": 39.930655,
                "count": 14
            },
            {
                "lng": 116.426092,
                "lat": 39.922995,
                "count": 16
            },
            {
                "lng": 116.41535,
                "lat": 39.931054,
                "count": 15
            },
            {
                "lng": 116.413022,
                "lat": 39.921895,
                "count": 13
            },
            {
                "lng": 116.415551,
                "lat": 39.913373,
                "count": 17
            },
            {
                "lng": 116.421191,
                "lat": 39.926572,
                "count": 1
            },
            {
                "lng": 116.419612,
                "lat": 39.917119,
                "count": 9
            },
            {
                "lng": 116.418237,
                "lat": 39.921337,
                "count": 54
            },
            {
                "lng": 116.423776,
                "lat": 39.921919,
                "count": 26
            },
            {
                "lng": 116.417694,
                "lat": 39.92536,
                "count": 17
            },
            {
                "lng": 116.415377,
                "lat": 39.914137,
                "count": 19
            },
            {
                "lng": 116.417434,
                "lat": 39.914394,
                "count": 43
            },
            {
                "lng": 116.42588,
                "lat": 39.922622,
                "count": 27
            },
            {
                "lng": 116.418345,
                "lat": 39.919467,
                "count": 8
            },
            {
                "lng": 116.426883,
                "lat": 39.917171,
                "count": 3
            },
            {
                "lng": 116.423877,
                "lat": 39.916659,
                "count": 34
            },
            {
                "lng": 116.415712,
                "lat": 39.915613,
                "count": 14
            },
            {
                "lng": 116.419869,
                "lat": 39.931416,
                "count": 12
            },
            {
                "lng": 116.416956,
                "lat": 39.925377,
                "count": 11
            },
            {
                "lng": 116.42066,
                "lat": 39.925017,
                "count": 38
            },
            {
                "lng": 116.416244,
                "lat": 39.920215,
                "count": 91
            },
            {
                "lng": 116.41929,
                "lat": 39.915908,
                "count": 54
            },
            {
                "lng": 116.422116,
                "lat": 39.919658,
                "count": 21
            },
            {
                "lng": 116.4183,
                "lat": 39.925015,
                "count": 15
            },
            {
                "lng": 116.421969,
                "lat": 39.913527,
                "count": 3
            },
            {
                "lng": 116.422936,
                "lat": 39.921854,
                "count": 24
            },
            {
                "lng": 116.41905,
                "lat": 39.929217,
                "count": 12
            },
            {
                "lng": 116.424579,
                "lat": 39.914987,
                "count": 57
            },
            {
                "lng": 116.42076,
                "lat": 39.915251,
                "count": 70
            },
            {
                "lng": 116.425867,
                "lat": 39.918989,
                "count": 8
            }
        ];

        if (!isSupportCanvas()) {
            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
        }
        heatmapOverlay = new BMapLib.HeatmapOverlay({
            "radius": 20
        });
        map.addOverlay(heatmapOverlay);
        heatmapOverlay.setDataSet({
            data: points,
            max: 100
        });

        function setGradient() {
            var gradient = {};
            var colors = document.querySelectorAll("input[type='color']");
            colors = [].slice.call(colors, 0);
            colors.forEach(function (ele) {
                gradient[ele.getAttribute("data-key")] = ele.value;
            });
            heatmapOverlay.setOptions({
                "gradient": gradient
            });
        }
        //判断浏览区是否支持canvas
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }

    </script>
</body>

</html>
